<template>
	<view>
		<scroll-view scroll-y="true" class="scrollContent" :enhanced="true" :bounces="false" :show-scrollbar="false">
			<view class="my">
				<view class="basic">
					<view class="basic_box">
						<view class="hello mb10">您好，贵宾</view>
						<view class="d-flex j-sb a-center">
							<view class="d-flex a-end">
								<view class="name">{{user.customerName}}</view>
								<view class="ml10" v-if="String(user.sex)">
									<u-tag :text="user.sex==0?'女士':'先生'" size="mini" bgColor="#7DB99F" borderColor="#7DB99F"></u-tag>
								</view>
							</view>
							<view class="d-flex a-center">
								<view class="qbye mr10">钱包余额</view>
								<view class="money">{{user.remainingAmount}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="top">
					<view class="top_box" @click="goPageLevel()">
						<view class="d-flex j-sb">
							<view class="d-flex flex-column j-sa">
								<view class="dqdj">当前等级</view>
								<view class="level">{{user.memberLevelRuleName}}贵宾</view>
								<!-- <view class="time">有效期至2025.05.21</view> -->
							</view>
							<view class="mr30">
								<u--image :src="iconInfo.diamonds" width="130rpx" height="130rpx"></u--image>
							</view>
						</view>
						<view class="mt15">
							<progress percent="0" activeColor="#1c774e" stroke-width="3" font-size="14" />
						</view>
						<!-- <view class="levelDesc">
					还需充值消费181点成长值升级至下一级，升级后解锁更高级特权
				</view> -->
					</view>
				</view>
				<view class="center">
					<view class="center_box d-flex flex-column j-sb" @click="goPageLevel()">
						<view class="d-flex a-center">
							<view class="hytq mr10">会员特权</view>
							<view>
								<u--image :src="iconInfo.privileges" width="40rpx" height="40rpx"></u--image>
							</view>
						</view>
						<view class="d-flex j-sb a-center">
							<view class="zk">等级越高享受商品折扣越高</view>
							<view class="yj">永久</view>
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="bottom-item" @click="goPagePurse()">
						<view class="content">
							<view class="title">我的钱包</view>
						</view>
						<view class="">
							<uni-icons type="forward" size="20" color="#999999"></uni-icons>
						</view>
					</view>
					<view class="bottom-item" @click="goPageMajordomo()" v-if="userInfo.housekeeperCode">
						<view class="content">
							<view class="title">我的管家</view>
						</view>
						<view class="">
							<uni-icons type="forward" size="20" color="#999999"></uni-icons>
						</view>
					</view>
					<view class="bottom-item" @click="goPageAddress()">
						<view class="content">
							<view class="title">我的收货地址</view>
						</view>
						<view class="">
							<uni-icons type="forward" size="20" color="#999999"></uni-icons>
						</view>
					</view>
					<view class="bottom-item" @click="goPageUser()">
						<view class="content">
							<view class="title">个人中心</view>
						</view>
						<view class="">
							<uni-icons type="forward" size="20" color="#999999"></uni-icons>
						</view>
					</view>
					<view class="bottom-item" @click="goPageUserManual()">
						<view class="content">
							<view class="title">隐私政策</view>
						</view>
						<view class="">
							<uni-icons type="forward" size="20" color="#999999"></uni-icons>
						</view>
					</view>
				</view>

				<!-- <tab-bar-view :tabCode="'2'"></tab-bar-view> -->
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		queryCustomerInfoByApp
	} from '@/api/index'
	export default {
		onLoad() {

		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.iconInfo = uni.getStorageSync('iconInfo')
			this.queryCustomerInfoByApp(this.userInfo)
		},
		onReady() {
			// 隐藏导航栏
			// uni.hideTabBar({});
		},
		data() {
			return {
				// background_img: uni.getStorageSync('setUrl'),
				userInfo: {},
				iconInfo: {},
				user: {},
				version: "",
				ip: "",
				pwdDisable: false,
				newPassword: null
			}
		},
		methods: {
			queryCustomerInfoByApp(data) {
				queryCustomerInfoByApp({
					customerCode: data.customerCode
				}).then(res => {
					uni.setStorageSync('userInfo', res.object)
					this.user = res.object
				})
			},

			goPage(url) {
				uni.navigateTo({
					url: "/subpkg_my/about/about"
				});
			},

			//  我的会员等级
			goPageLevel() {
				console.log('789');
				uni.navigateTo({
					url: "/subpkg_my/levelRules/levelRules"
				});
			},

			//  我的钱包
			goPagePurse() {
				uni.navigateTo({
					url: "/subpkg_my/purse/purse"
				});
			},

			// 我的管家
			goPageMajordomo(url) {
				uni.navigateTo({
					url: "/subpkg_my/majordomo/majordomo"
				});
			},

			goPageUserManual(url) {
				uni.navigateTo({
					url: "/subpkg_my/userManual/userManual?type=1&fileUrl=" + this.iconInfo.privacyPolicy
				});
			},

			// 我的收货地址
			goPageAddress() {
				uni.navigateTo({
					url: "/subpkg_my/address/address"
				});
			},

			goPageUser() {
				uni.navigateTo({
					url: "/subpkg_my/userCenter/userCenter"
				});
			},

			// 打开弹出层
			openPopup(val) {
				this.$refs[val].open()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.scrollContent {
		//可视高度，需要在多大的盒子中进行滑动
		height: 100vh;
		width: 100%;
	}

	.my {
		height: 100vh;
		background-color: #f5f5f5;
		font-family: Source Han Sans CN, Source Han Sans CN-500;
	}

	.basic {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #77C7A2;
		height: 280rpx;
		box-sizing: border-box;


		.basic_box {
			width: 700rpx;
			height: 170rpx;

			.hello {
				font-size: 28rpx;
				color: #666666;
				font-weight: 500;
			}

			.name {
				font-size: 40rpx;
				color: #333333;
				font-weight: 500;
			}

			.money {
				font-size: 40rpx;
				color: #333333;
				font-weight: 500;
			}

			.qbye {
				text-align: right;
				font-size: 28rpx;
				color: #666666;
				font-weight: 400;
			}
		}
	}

	.top {
		margin-top: -120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.top_box {
			width: 700rpx;
			height: 250rpx;
			padding: 30rpx 30rpx;
			box-sizing: border-box;
			border-radius: 12rpx;
			background: linear-gradient(180deg, #53b789, #8cdfb7 100%);

			.dqdj {
				font-size: 24rpx;
				font-weight: 400;
				color: #454545;
				line-height: 24rpx;
			}

			.level {
				font-size: 36rpx;
				font-weight: 600;
				color: #fff;
			}

			.time {
				font-size: 24rpx;
				font-weight: 400;
				color: #747474;
			}

			.levelDesc {
				color: #62997a;
				font-size: 24rpx;
				font-weight: 400;
			}
		}
	}

	.center {
		display: flex;
		flex-direction: column;
		align-items: center;

		.center_box {
			width: 700rpx;
			height: 170rpx;
			padding: 26rpx 26rpx;
			box-sizing: border-box;
			border-radius: 12rpx;
			background: #ffffff;
			margin-top: 38rpx;
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);

			.hytq {
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
			}

			.zk {
				font-weight: 400;
				font-size: 32rpx;
			}

			.yj {
				font-size: 28rpx;
				color: #999999;
			}
		}
	}

	.bottom {
		display: flex;
		flex-direction: column;
		align-items: center;

		.bottom-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 700rpx;
			height: 88rpx;
			padding: 26rpx 26rpx;
			margin-top: 38rpx;
			box-sizing: border-box;
			background: #ffffff;
			border-radius: 16rpx;
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);

			.content {
				display: flex;
				align-items: center;

				.title {
					font-size: 32rpx;
					font-weight: 400;
					color: #333333;
				}
			}
		}
	}
</style>